<!--
 * @Date: 2022-02-24 19:09:42
 * @Author: 陶子
 * @LastEditTime: 2023-06-12 14:26:05
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\workOrder\workOrderDetail.vue
 * @pageName: 这是--(报工详情)--页面
-->
<template>
  <jke-modal
    :visible.sync='jkeForm.visible'
    :width='1200'
    :title='jkeForm.title'
    :fullscreen.sync='jkeForm.fullscreen'
    :switchFullscreen='jkeForm.switchFullscreen'
  >
    <div class='page-scroll-wrap'>
      <a-card title='' :bordered='false' style='margin-top: 12px'>
        <div class='box'>
          <div class='box-column'>
            <div class='boeay'>
              <div>工单编号</div>
              <p>{{ datilForm.orderCode || '-' }}</p>
            </div>
            <div class='boeay'>
              <div>生产物品</div>
              <p>
                {{ goodsNames }}
              </p>
            </div>
          </div>
          <div class='box-column'>
            <div class='boeay'>
              <div>计划时间</div>
              <p>{{ datilForm.timePeriod || '-' }}</p>
            </div>
            <div class='boeay'>
              <div>单位</div>
              <p>{{ datilForm.unitName || '-' }}</p>
            </div>
          </div>
          <div class='box-column'>
            <div class='boeay'>
              <div>关联订单</div>
              <p>{{ datilForm.sellOrderCode || ' -' }}</p>
            </div>
            <div class='boeay'>
              <div>计划生产数量</div>
              <p>{{ datilForm.planProduceNum || '-' }}</p>
            </div>
          </div>
          <div class='box-column qr'>
            <div class='boeay'>
              <div>状态</div>
              <p :style='{ color: StatusColor(datilForm.orderStatus) }'>{{ TextStatus(datilForm.orderStatus) }}</p>
            </div>
          </div>
        </div>
      </a-card>
      <a-card :bordered='false' style='flex: 1; margin-bottom: 12px; margin-top: 12px'>
        <a-tabs default-active-key='1'>
          <a-tab-pane key='1' tab='任务信息'>
            <div class='body-box'>
              <div class='body-table'>
                <a-table :scroll='{ x: scrollX }' :pagination='false' :columns='columns' :data-source='dataList'>
                  <span slot='customIndex' slot-scope='text, record, index'>
                    {{ (current - 1) * pageSize + index + 1 }}
                  </span>
                  <span slot='planStartTime' slot-scope='text, record'>{{
                      record.planStartTime + `~` + record.planEndTime || '-'
                    }}</span>
                </a-table>
                <div style='display: flex; margin: 20px 0; justify-content: space-between; align-items: center'>
                  <div class='check-contain'>
                    <span>
                      {{ `共 ${total} 条` }}
                    </span>
                  </div>
                  <div class='page-contain'>
                    <a-pagination
                      :total='total'
                      v-model='current'
                      :page-size-options='pageSizeOptions'
                      :page-size='pageSize'
                      @change='onChangePage'
                      @showSizeChange='onShowSizeChange'
                      show-quick-jumper
                      show-size-changer
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key='2' tab='自定义信息'>
            <div class='item-wrap' style='box-sizing: border-box; padding: 0 4px; height: 490px'>
              <div class='uni-card' >
                <div class='item-wrap1' v-if='formTypeExtendedFields.length'>
                  <div
                    class='detail-item'
                    style='width: 33%'
                    v-for='(item, index) in formTypeExtendedFields'
                    :key='index'
                  >
                    <p class='subtitle'>{{ item.fieldName }}</p>
                    <p class='secondary-text'>{{ datilForm.extDataJson[item.fieldKey] || '-' }}</p>
                  </div>
                  <div
                    class='detail-item'
                    style='width: 33%'
                    v-for='(item, index) in formTypeExtendedFields.length % 3'
                    :key='index'
                  ></div>
                </div>
                <div v-else>
                  暂无数据
                </div>
              </div>

            </div>
          </a-tab-pane>
          <a-tab-pane key='3' tab='生产报工'>
            <div class='body-box'>
              <div class='body-table'>
                <a-table
                  :scroll='{ x: true }'
                  :pagination='false'
                  :columns='columns1'
                  :data-source='dataList1'
                  @change='tableChange'
                >
                  <span slot='planStartTime' slot-scope='text'>{{
                      workOrderInfo.planStartTime + `~` + workOrderInfo.planEndTime || '-'
                    }}</span>
                  <!-- 输入框搜索 -->
                  <div
                    slot='searchDropdown'
                    slot-scope='{ selectedKeys, confirm, clearFilters, column }'
                    class='searchWorkOreder'
                  >
                    <a-input
                      placeholder='请输入'
                      v-model='filterForm[column.dataIndex]'
                      style='width: 188px; display: block'
                      @pressEnter='tablePage1()'
                    />
                    <a-button
                      type='primary'
                      style='width: 80px; margin-left: 20px; display: block'
                      @click='() => tablePage1()'
                    >
                      搜索
                    </a-button>
                  </div>
                  <a-icon
                    slot='searchIcon'
                    slot-scope='filtered'
                    type='search'
                    :style="{ color: filtered ? '#108ee9' : undefined }"
                  />
                  <!-- 人员选择 -->
                  <div slot='selectPeople' slot-scope='{ confirm, clearFilters, column }' class='searchWorkOreder'>
                    <j-select-user-by-dep
                      v-model='filterForm.userId'
                      @changeRow='handeleChangeRow'
                      :seldep='true'
                      :modalWidth='1000'
                      :limit='5'
                      :multi='true'
                      v-if="column.dataIndex == 'userText'"
                    ></j-select-user-by-dep>
                    <j-select-user-by-dep
                      v-model='filterForm.createBy'
                      @changeRow='handeleChangeRow'
                      :seldep='true'
                      :modalWidth='1000'
                      :limit='5'
                      :multi='true'
                      v-if="column.dataIndex == 'createByText'"
                    ></j-select-user-by-dep>
                    <j-select-user-by-dep
                      v-model='filterForm.updateBy'
                      @changeRow='handeleChangeRow'
                      :seldep='true'
                      :modalWidth='1000'
                      :limit='5'
                      :multi='true'
                      v-if="column.dataIndex == 'updateByText'"
                    ></j-select-user-by-dep>
                    <a-button
                      type='primary'
                      style='width: 80px; margin-left: 20px; display: block'
                      @click='() => tablePage1(confirm, column.dataIndex, clearFilters)'
                    >
                      搜索
                    </a-button>
                  </div>
                  <a-icon
                    slot='selectIcon'
                    slot-scope='filtered'
                    type='filter'
                    :style="{ color: filtered ? '#108ee9' : undefined }"
                  />
                </a-table>
                <div style='display: flex; margin: 20px 0; justify-content: space-between; align-items: center'>
                  <div class='check-contain'>
                    <span>
                      {{ `共 ${total1} 条` }}
                    </span>
                  </div>
                  <div class='page-contain'>
                    <a-pagination
                      :total='total1'
                      v-model='current1'
                      :page-size-options='pageSizeOptions'
                      :page-size='pageSize1'
                      @change='onChangePage1'
                      @showSizeChange='onShowSizeChange1'
                      show-quick-jumper
                      show-size-changer
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import vueQr from 'vue-qr'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat, camelCase2UnderLine } from '@/utils/util'
import { productionReportingDetail, ordlistTable, ordlistTables } from '@/api/produce/index'
import { getFileListByIds, workOrdequeryById } from '@/api/produce/productionManage'
import { mapState } from 'vuex'
import { APILX } from '@/api/requestLx'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 60,
    scopedSlots: { customRender: 'customIndex' }
  },
  {
    title: '工序',
    dataIndex: 'processesName',
    key: 'processesName',
    scopedSlots: { customRender: 'processesName' }
  },
  {
    title: '计件单价',
    dataIndex: 'pieceRate',
    key: 'pieceRate',
    scopedSlots: { customRender: 'pieceRate' },
  },
  {
    title: '任务时间',
    dataIndex: 'planStartTime',
    key: 'planStartTime',
    width: 290,
    scopedSlots: { customRender: 'planStartTime' }
  },
  {
    title: '计划数',
    dataIndex: 'planNum',
    key: 'planNum',
    ellipsis: true
  },
  {
    title: '合格数 ',
    dataIndex: 'qualifiedNum',
    key: 'qualifiedNum',
    ellipsis: true
  },
  {
    title: '不合格数',
    dataIndex: 'unqualifiedNum',
    key: 'unqualifiedNum',
    ellipsis: true
  },
  {
    title: '不合格原因',
    dataIndex: 'unqualifiedNotesAndNum',
    key: 'unqualifiedNotesAndNum',
    ellipsis: true
  }
]
const columns1 = [
  {
    title: '报工数量',
    dataIndex: 'reportNum',
    key: 'reportNum',
    ellipsis: true,
    width: 120,
    scopedSlots: { customRender: 'reportNum' }
  },
  {
    title: '合格数',
    dataIndex: 'qualifiedNum',
    ellipsis: true,
    width: 120,
    key: 'qualifiedNum'
  },
  {
    title: '不合格数',
    dataIndex: 'unqualifiedNum',
    key: 'unqualifiedNum',
    width: 120,
    ellipsis: true
  },
  {
    title: '计件单价',
    dataIndex: 'pieceRate',
    key: 'pieceRate',
    ellipsis: true,
  },
  {
    title: '计件工资',
    dataIndex: 'totalSalary',
    key: 'totalSalary',
    ellipsis: true,
  },
  {
    title: '操作人 ',
    dataIndex: 'userText',
    key: 'userText',
    ellipsis: true,
    width: 120,
    scopedSlots: {
      filterDropdown: 'selectPeople',
      filterIcon: 'selectIcon',
      customRender: 'userText'
    }
  },
  {
    title: '工序名称',
    dataIndex: 'processesName',
    key: 'processesName',
    width: 120,
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchDropdown',
      filterIcon: 'searchIcon',
      customRender: 'processesName'
    }
  },
  {
    title: '报工时间',
    dataIndex: 'reportTime',
    key: 'reportTime',
    width: 180,
    ellipsis: true,
    sorter: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis: true,
    width: 180,
    sorter: true
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    ellipsis: true,
    width: 180,
    sorter: true
  },
  {
    title: '创建人',
    dataIndex: 'createByText',
    key: 'createByText',
    ellipsis: true,
    width: 120,
    scopedSlots: {
      filterDropdown: 'selectPeople',
      filterIcon: 'selectIcon',
      customRender: 'createByText'
    }
  },
  {
    title: '更新人',
    dataIndex: 'updateByText',
    key: 'updateByText',
    ellipsis: true,
    width: 120,
    scopedSlots: {
      filterDropdown: 'selectPeople',
      filterIcon: 'selectIcon',
      customRender: 'updateByText'
    }
  }
]
export default {
  data() {
    return {
      filterForm: {},
      goodsNames: '',
      dataList: [],
      dataList1: [],
      columns,
      columns1,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      total: 0,
      pageSize: 10,
      current1: 1,
      total1: 0,
      pageSize1: 10,
      jkeForm: {
        title: '订单详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      formTypeExtendedFields:[],
      orderCode: '',
      taskId: '',
      datilForm: {
        orderCode: '',
        processesCode: '',
        processesName: '',
        planStartTime: '',
        planEndTime: '',
        saleOrderCode: '',
        orderStatus: '',
        planNum: '',
        serialCode: '',
        serialName: '',
        serialSpecifications: ''
      },
      workOrderInfo: {
        reportNum: '',
        qualifiedNum: '',
        unqualifiedNum: '',
        dataSource: []
      },
      sortForm: {}
    }
  },
  components: {
    crumbs,
    FileDetail,
    vueQr
  },
  watch: {
    'jkeForm.visible': function(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsedAno
    }),
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    }
  },
  methods: {
    handeleChangeRow() {
      this.tablePage1()
    },
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('排序', sorter)
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: camelCase2UnderLine(sorter.columnKey)
        }
        this.tablePage1()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: ''
        }
        this.tablePage1()
      }
    },
    StatusColor(orderStatus) {
      if (orderStatus == 0) {
        return '#FF943E'
      }
      if (orderStatus == 1) {
        return '#1890FF'
      } else if (orderStatus == 2) {
        return '#15BC83'
      } else if (orderStatus == 3) {
        return '#EEEEEE'
      }
    },
    TextStatus(orderStatus) {
      if (orderStatus == 0) {
        return '未开始'
      } else if (orderStatus == 1) {
        return '生产中'
      } else if (orderStatus == 2) {
        return '已完成'
      } else if (orderStatus == 3) {
        return '已取消'
      }
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    onChangePage1(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage1()
    },
    onShowSizeChange1(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage1()
    },
    initDetail(query) {
      console.log(query, '222')
      this.jkeForm.visible = true
      this.taskId = query.id
      this.getDetail(query)
      this.tablePage()
      this.tablePage1()
      APILX.formTypeExtendedFieldList({ formType: 3 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result
        }
      })
      this.columns1 = columns1

      APILX.formTypeExtendedFieldList({ formType: 4 }).then((res) => {
        if (res.code == 200 && res.result) {
          let formTypeExtendedFields = res.result || []
          let column = []
          formTypeExtendedFields.forEach((field) => {
            column.push({
              title: field.fieldName,
              dataIndex: field.fieldKey,
              ellipsis: true
            })
          })

          this.columns1 = JSON.parse(JSON.stringify(this.columns1.concat(column)))
        }
      })
    },
    getDetail(query) {
      workOrdequeryById({ id: query.id }).then((res) => {
        if (res.code == 200) {
          this.datilForm = res.result
          this.goodsNames = `${this.datilForm.serialNumber || '|'}|${this.datilForm.serialName || '|'} |${
            this.datilForm.serialSpecifications || '|'
          }`
          setTimeout(() => {
            this.$refs.createFormItemRef.setFields({
              ...this.datilForm,
              inWarehouseTimeText: this.datilForm.inWarehouseTime
            })
          }, 100)
        }
      })
    },
    tablePage1() {
      let param = {
        orderId: this.taskId,
        pageNo: this.current,
        pageSize: this.pageSize,
        ...this.filterForm,
        ...this.sortForm
      }
      ordlistTables(param).then((res) => {
        if (res.code == 200) {
          this.dataList1 = res.result.records.map((ele) => {
            let newkey = ''
            let newObj = {}
            for (const key in ele.extDataJson) {
              newkey = key
              newObj[newkey] = ele.extDataJson[key]
            }
            return {
              ...ele,
              ...newObj
            }
          })

          this.total1 = res.result.total
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    tablePage() {
      let param = {
        orderId: this.taskId,
        pageNo: this.current,
        pageSize: this.pageSize
      }
      console.log(param)
      ordlistTable(param).then((res) => {
        if (res.code == 200) {
          this.dataList = res.result.records
          this.total = res.result.total
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';

.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 206px;

  .box-column {
    flex: 1;
    height: 100%;

    .boeay {
      margin: 20px 0;
    }
  }
}

// ==============
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}

.item-wrap1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.detail-item {
  width: 30%;
}

/* 副标题 */
.subtitle {
  font-size: 14px;
  color: #191f25;
}

/* 详情内容/次要文字 */
.secondary-text {
  font-size: 14px;
  color: #888888;
  word-break: break-all;
}

// ========================

.body-box {
  background: #f6f6f6;

  .num {
    display: flex;
    background: white;

    .box-num {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 206px;
      border-right: 1px solid #e8e8e8;

      &:last-child {
        border-right: none;
      }

      .topnum {
        font-size: 16px;
        font-weight: bold;
      }

      .bomnum {
        margin-top: 15px;
        font-size: 24px;
      }
    }
  }

  .body-table {
    background: white;
    margin-top: 10px;
  }
}

.parion {
  padding: 15px 12px 6px 43px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle {
  min-width: 200px;
}

.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}

/deep/ .ant-modal-body {
  height: calc(100vh - 55px) !important;

  .page-scroll-wrap {
    height: calc(100vh - 55px);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
